<template>
  <div class="add-cart-effect" :class="playing ? '__active' : ''">
    <div class="point" :style="{ left: x + 'px', top: y + 'px' }"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const x = ref(0);
const y = ref(0);
const a = ref(0);
const playing = ref(false);
const task = ref<number | undefined>();
import { onAddCart } from "@/hooks/useAddCartEffect";

const play = (fromX: number, fromY: number, callback: () => void) => {
  x.value = fromX;
  y.value = fromY;
  playing.value = true;
  const deltaX = 1;
  const top = fromY - 200;
  task.value = setInterval(() => {
    x.value += deltaX;
    if (a.value === 0) {
      if (y.value <= fromY && y.value >= top) {
        y.value -= Math.max(1, (y.value - top) / 5);
      } else {
        a.value = 1;
      }
    } else if (y.value < screen.height) {
      y.value += (y.value - top + 10) / 5;
    } else {
      a.value = 0;
      playing.value = false;
      clearInterval(task.value);
      task.value = undefined;
      if (callback) callback();
    }
  }, 10);
};
onAddCart(play.bind(this));
</script>
<style lang="scss">
.add-cart-effect {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  z-index: 10000000;

  .point {
    position: fixed;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 100%;
    box-shadow: 1px 10px 30px #555;
  }
}

.add-cart-effect.__active {
  display: block;
}
</style>
